<template>
  <a-layout-header style="height: 48px;line-height: 48px;">
    <a-icon
      class="colLogo"
      :type="collapsed ? 'menu-unfold' : 'menu-fold'"
      @click="handleClick"
    />
    <div style="display: inline-block">
      {{projectName}}
      <b
        v-if="$NODE_ENV == 'development'"
        style="color: #F8AC14;"
      >{{tips}}</b>
      <!-- <a-breadcrumb separator=">">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
        <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
        <a-breadcrumb-item>An Application</a-breadcrumb-item>
      </a-breadcrumb> -->
    </div>
    <div class="headerRight">
      <HeaderScreen />
    </div>
  </a-layout-header>
</template>

<script>
import HeaderScreen from './HeaderScreen.vue'

export default {
  name: 'headerPage',
  components: {
    HeaderScreen,
  },
  data() {
    return {
      projectName: '柜⾯收付系统',
      collapsed: false,
      tips: '【注意当前为mock数据!!!!!!】',
    }
  },
  methods: {
    handleClick() {
      this.collapsed = !this.collapsed
      this.$emit('handleClickCollapse', this.collapsed)
    },
  },
}
</script>

<style scoped lang="less">
.ant-layout-header {
  background: #fff;
  padding-left: 4px;
}
.colLogo {
  font-size: 20px;
  padding: 0 20px;
}
.headerRight {
  line-height: 50px;
  float: right;
}
</style>